<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象-选项卡</title>
    <style>
       /* .box{display:none;}*/




        body{
            background: #000;
        }
        section{
            width: 400px;
            height: 400px;
            border: 1px solid #fffce7;
            margin: 10px 0;
        }
        #box div,#box2 div{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            display: none;
            border-radius: 30px;
            margin-top: 10px;
            color: #fff;
            text-align: center;
            line-height: 300px;
            font-size: 100px;
        }
        #box input,#box2 input{
            width: 100px;
            height: 40px;
            display: inline-block;
            cursor: pointer;
        }
    </style>
</head>
<body>
<!-- <div id="div2">
    <input class="active" type="button" value="王立娟">
    <input type="button" value="同学">
    <input type="button" value="几点上课">
</div>
<div class="box" style="display:block;">11</div>
<div class="box">22</div>
<div class="box">33</div> -->




<section id="box">
    <input type="button" value="按钮1" style="background: hotpink">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">
    <div style="display: block;border-color: hotpink">1</div>
    <div>2</div>
    <div>3</div>
</section>
<section id="box2">
    <input type="button" value="按钮1" style="background: hotpink">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">
    <div style="display: block;border-color: hotpink">1</div>
    <div>2</div>
    <div>3</div>
</section>
</body>
</html>
<script type="text/javascript">
//     window.onload = function () {
//         var oTab = new TabSwitch("div2");
//     }
//     var aBtn = null;
//     var aDiv = null;
//     function TabSwitch(id){
//         var div2 = document.getElementById(id);
//         this.aBtn = div2.getElementsByTagName('input');//全局变量 转变成属性
//         this.aDiv = document.getElementsByClassName('box');
//         var _this =this;//将这里的对象this存入_this中，方便在按钮点击里面用
//         for(i=0;i<this.aBtn.length;i++){
//             this.aBtn[i].index = i;
//             this.aBtn[i].onclick = function () {
//                 _this.tab(this);//这里的this指的是按钮，把它作为参数传到函数中；
//             }
//         }
//     }
//     TabSwitch.prototype.tab = function (aBtn){//函数 转变成对象的方法
// //        alert(this);  //input
// //        alert(this);    //这里的this指的是对象object;
//         for(i=0;i<this.aBtn.length;i++){
//             this.aBtn[i].className = '';
//             this.aDiv[i].style.display = 'none';
//         }
//         aBtn.className = 'active';
//         this.aDiv[aBtn.index].style.display = 'block';
//     }






//调用传参
window.onload=function () {
        new Tab('box');
        new Tab('box2');
    };
    //属性
    var btns=null;
    var oDiv=null;

    function Tab(id) {
    var _this=this;
    //console.log(_this);//指tab，调用的对象
    //console.log(this);//指tab，调用的对象
    var  box=document.getElementById(id);
    this.btns=box.getElementsByTagName('input');
    this.oDiv=box.getElementsByTagName('div');

    for(var i=0;i<this.btns.length;i++){
        this.btns[i].index=i;//索引
        this.btns[i].onclick=function(){
            _this.click(this);
            console.log(this);//指当前按的按钮
            console.log(_this);//指tab，调用的对象
        }
    }
}
    //方法；
    Tab.prototype.click=function(btns) {
        for(var i=0;i<this.oDiv.length;i++){
            this.btns[i].style.background='';//点击后先清除所有的按钮背景
            console.log(this);//指tab，调用的对象
            this.oDiv[i].style.display='none';
            this.oDiv[i].style.borderColor='hotpink';
        }
        this.oDiv[btns.index].style.display='block';//this指当前点击的元素按钮
        this.oDiv[btns.index].style.borderColor='hotpink';
        btns.style.background='hotpink';//给当前按钮加背景
    }




//将常规的面向过程的写法改成面向对象的写法
//   1,前提：所有东西都在onload里;
//   2,改写：不能有函数嵌套，可以有全局变量;
//   3,   onload  --   构造函数
//        全局变量  --   属性
//          函数   --   方法
//   4,改错： 主要是this的指向关系
//



// 面向对象的选项卡
// 原则
//     先写出普通的写法，然后改成面向对象写法
//          普通方法变型
//               尽量不要出现函数嵌套函数
//               可以有全局变量
//               把onload中不是赋值的语句放到单独函数中
//          改成面向对象
//              全局变量就是属性
//              函数就是方法
//              Onload中创建对象
//              改this指向问题
</script>











